<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>住户列表</title>
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css">
    <style>
        .x-nav{padding:0 20px;position:relative;z-index:99;border-bottom:1px solid #e5e5e5;line-height:39px;height:39px;overflow:hidden}
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
<!--    解决layui复选框不居中显示的bug-->
    <style type="text/css">
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div class="x-nav">
     <span class="layui-breadcrumb">
         <a><cite>首页</cite></a>
         <a><cite>业主信息管理</cite></a>
         <a><cite>人员管理</cite></a>
     </span>
    <a class="layui-btn  layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="likename" id="likename" autocomplete="off" placeholder="请输入" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="liketelephone" id="liketelephone" autocomplete="off" placeholder="请输入" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn " id="searchBtn" lay-submit
                    lay-filter="formDemo" data-type="reload" style="margin-left: 15px">
                <i class="layui-icon  layui-icon-search"></i> 查询
            </button>
            <button class="layui-btn" id="reset">重置</button>
        </div>
    </div>


<div class="layui-col-xs12">
    <button type="button" class="layui-btn  " id="addBtn">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>

    <div class="layui-row">
        <div class="layui-col-md2">
            <div id="buildTree" lay-filter="buildTree"></div>
        </div>
        <div class="layui-col-md10">
            <table id="userTable" lay-filter="userTable" ></table>
        </div>
    </div>


</div>

<!--添加缴费信息-->
<form id="addBillForm" class="layui-form" lay-filter="addBillForm" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <input type="hidden"  name="userId" >
    <input type="hidden" name="userName" >

    <div class="layui-form-item">
        <label class="layui-form-label">水费金额</label>
        <div class="layui-input-block">
            <input type="text" name="waterBill" lay-verify="required|number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">电费金额</label>
        <div class="layui-input-block">
            <input type="text" name="electricityBill" lay-verify="required|number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">物业费金额</label>
        <div class="layui-input-block">
            <input type="text" name="wuyeBill" lay-verify="required|number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">账单日期</label>
        <div class="layui-input-block">
            <input type="text" id="billDate" name="billDate" lay-verify="required" placeholder="yyyy-MM" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio"  name="state" value="1" title="已缴费" />
            <input type="radio"  name="state" value="0" title="未缴费" />
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit  lay-filter="addBill">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>

    <!--添加车辆-->
    <form id="addCarForm" class="layui-form" lay-filter="addCarForm" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

        <input type="hidden" id="userId" name="userId">
        <input type="hidden" id="userName" name="userName">
        <div class="layui-form-item">
            <label class="layui-form-label">车辆图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadFileCarAdd">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <input type="hidden" name="carPhoto" id="CarImageAdd" value=""/>
        <div class="layui-upload-list">
            　<img class="layui-upload-img" width="200px" height="100px" id="preShowCarAdd"/>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">车辆颜色</label>
            <div class="layui-input-block">
                <input type="text" name="carColor" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">车牌号</label>
            <div class="layui-input-block">
                <input type="text" name="cardNumber" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-block">
                <input type="text" name="creatTime" class="layui-input" autocomplete="off" id="addCarDate">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addCar">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>

    <!--添加宠物-->
    <form id="addPetForm" class="layui-form" lay-filter="addPetForm" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

        <input type="hidden"  name="userId" >
        <input type="hidden"  name="userName" >
        <div class="layui-form-item">
            <label class="layui-form-label">宠物图片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadFilePetAdd">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </div>
        <input type="hidden" name="petPhoto" id="PetImageAdd" value=""/>
        <div class="layui-upload-list">
            　<img class="layui-upload-img" width="200px" height="100px" id="preShowPetAdd"/>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">宠物颜色</label>
            <div class="layui-input-block">
                <input type="text" name="petColor" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-block">
                <input type="text" name="creatTime" class="layui-input" autocomplete="off" id="addPetDate">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addPet">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>

<!--添加-->
<form id="addForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <input type="hidden" id="buildId" name="buildId" >

    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">户号</label>
                <div class="layui-input-block">
                    <input type="radio" name="huhao" value="1" title="A">
                    <input type="radio" name="huhao" value="2" title="B">
                    <input type="radio" name="huhao" value="3" title="C" checked>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio"  name="state" value="1" title="已入住" />
                    <input type="radio"  name="state" value="0" title="未入住" />
                </div>
            </div>



        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo">
            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="uploadFile1">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>
            </div>
            <input type="hidden" name="userPhoto" id="ImageAdd" value=""/>
            <div class="layui-upload-list">
                　<img class="layui-upload-img" width="200px" height="100px" id="preShow1"/>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="telephone" lay-verify="required|phone" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">入住日期</label>
                <div class="layui-input-block">
                    <input type="text" name="checkDate" class="layui-input" autocomplete="off" id="addDate">
                </div>
            </div>
        </div>
    </div>
    <p></p>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addUser">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>



<!--修改-->
<form id="updateForm" lay-filter="updateForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">

            <input type="hidden" name="id" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input" >

            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="telephone" lay-verify="required|phone" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio"  name="state" value="1" title="已入住" />
                    <input type="radio"  name="state" value="0" title="未入住" />
                </div>
            </div>

        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo">

            <div class="layui-form-item">
                <label class="layui-form-label">户号</label>
                <div class="layui-input-block">
                    <input type="radio" name="huhao" value="1" title="A">
                    <input type="radio" name="huhao" value="2" title="B">
                    <input type="radio" name="huhao" value="3" title="C" checked>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="uploadFile2">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>
            </div>
            <input type="hidden" name="userPhoto" id="ImageUpdate" value=""/>
            <div class="layui-upload-list">
                　<img class="layui-upload-img" width="200px" height="100px" id="preShow2"/>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">入住日期</label>
                <div class="layui-input-block">
                    <input type="text" name="checkDate" class="layui-input" autocomplete="off" id="updateDate">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="updateUser">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>

    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
    $(window).on('load',function() {
        let item = localStorage.getItem("code");
        if (item != 0) {
            window.location.href = "/login.jsp"
        }
    });
    layui.use(['element'], function(){
        var element=layui.element;
        element.init();
    });

    var status = '';
    layui.use(["table","form","upload","layer","tree","laydate"],function() {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var tree = layui.tree;
        var laydate=layui.laydate;

        $.ajax({
            url:"${pageContext.request.contextPath}/hy-build/showTree",
            dataType:'json',
            success:function (data) {
                tree.render({
                    elem: '#buildTree'  //绑定元素
                    ,click:function (obj) {
                        if(obj.data.children === null){
                            status=obj.data.id;
                            console.log(status)
                            $("#buildId").attr("value",status);

                            table.render({
                                elem: '#userTable'
                                ,where: {
                                    likename:$('#likename').val(),
                                    liketelephone:$("#liketelephone").val(),
                                    buildId:obj.data.id
                                }
                                ,page: true
                                ,limit:5
                                ,limits:[5,8,12]
                                ,url: 'http://localhost:8888/hy-user/showUser' //数据接口
                                ,cols: [[ //表头
                                    {field: 'id', width:60,title: '编号' }
                                    ,{field: 'username',width:80, title: '用户名'}
                                    ,{field: 'password',width:90, title: '密码'}
                                    ,{field: 'name',width:90, title: '姓名'}
                                    ,{field: 'userPhoto', width:110,title: '照片'
                                        ,templet:function(d){
                                            return "<img src='"+d.userPhoto+"' height='50'/>";
                                        }
                                    }
                                    ,{field: 'buildName',width:130, title: '楼层房间名'}
                                    ,{field: 'huhao',width:60, title: '户号',
                                        templet:function(d){
                                            if(d.huhao==1){
                                                res = "A";
                                            }
                                            if(d.huhao==2){
                                                res = "B";
                                            }
                                            if(d.huhao==3){
                                                res = "C";
                                            }
                                            return res;
                                        }
                                    }
                                    ,{field: 'telephone',width:120, title: '手机号码'}
                                    ,{field: 'state',width:80, title: '状态',
                                        templet:function(d){
                                            return d.state==1?"已入住":"未入住";
                                        }
                                    }
                                    ,{field: 'checkDate', width:170,title: '入住时间'}
                                    ,{title:"操作", width:230, align:'center', toolbar: '#barDemo'}
                                ]]
                            });
                        }
                    }
                    ,data:data
                })
            }
        })

        //渲染table表格=====开始
        table.render({
            elem: '#userTable'
            ,page: true
            ,limit:5
            ,limits:[5,8,12]
            ,url: 'http://localhost:8888/hy-user/showUser' //数据接口
            ,cols: [[ //表头
                {field: 'id', width:60,title: '编号' }
                ,{field: 'username',width:80, title: '用户名'}
                ,{field: 'password',width:90, title: '密码'}
                ,{field: 'name',width:90, title: '姓名'}
                ,{field: 'userPhoto', width:110,title: '照片'
                    ,templet:function(d){
                        return "<img src='"+d.userPhoto+"' height='50'/>";
                    }
                }
                ,{field: 'buildName',width:130, title: '楼层房间名'}
                ,{field: 'huhao',width:60, title: '户号',
                    templet:function(d){
                        if(d.huhao==1){
                            res = "A";
                        }
                        if(d.huhao==2){
                            res = "B";
                        }
                        if(d.huhao==3){
                            res = "C";
                        }
                        return res;
                    }
                }
                ,{field: 'telephone',width:120, title: '手机号码'}
                ,{field: 'state',width:80, title: '状态',
                    templet:function(d){
                        return d.state==1?"已入住":"未入住";
                    }
                }
                ,{field: 'checkDate', width:170,title: '入住时间'}
                ,{title:"操作", width:230, align:'center', toolbar: '#barDemo'}
            ]]
        });
        //渲染table表格=====结束
        // 给添加按钮增加弹出层---开始
        $("#addBtn").click(function(){
            if(status===''){
                layer.open({
                    title: '添加新住户'
                    ,content: '请先选择楼层节点！！！'
                });
            }else {
                layer.open({
                    type:1,
                    area: ['700px','400px'],
                    offset: 't',
                    title:"添加新住户",
                    content:$("#addForm")
                });
            }
        });
        //给添加按钮增加弹出层---结束

        //给添加员工表单增加监听事件---开始
        form.on("submit(addUser)", function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            $.ajax({
                url:"http://localhost:8888/hy-user/addUser",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("添加成功！");
                        //刷新table表格
                        table.reload("userTable");
                    }else if(res.code==1){
                        layer.msg(res.message);
                    }else if(res.code==2){
                        layer.msg(res.message);
                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //给添加员工表单增加监听事件---结束

        /*监听table表格上面的操作按钮====开始*/

        table.on("tool(userTable)",function (obj) {
            var data = obj.data;
            console.log(data)
            var layEvent = obj.event;
            if(layEvent === 'del'){
                //调用confirm方法
                layer.confirm('是否确认删除？',function (admin) {
                    //发出ajax请求
                    $.ajax({
                        url: "http://localhost:8888/hy-user/deleteUser",
                        data: "id="+data.id,
                        dataType: "json",
                        success: function (ss) {
                            //提示删除成功，刷新table表格
                            if(ss.code==0){
                                layer.msg("删除成功");
                                table.reload("userTable");
                            }else if(ss.code==1){
                                layer.msg(ss.message);
                            }
                        }
                    });
                    layer.close(admin);
                });
            }else if(layEvent === 'edit') {
                //1.根据data获取到数据
                //2.把数据回显到修改的form表单中
                form.val("updateForm",data);
                //把from表单放入弹出层中显示出来
                layer.open({
                    type:1,
                    offset: 't',
                    area: ['700px','400px'],
                    title:"修改住户信息",
                    content:$("#updateForm")
                });
                $("#preShow2").attr('src','${pageContext.request.contextPath}/'+data.userPhoto);
            }else if(layEvent === 'addCar') {

                form.val("addCarForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "userId": data.id
                    ,"userName": data.name // "name": "value"
                });

                layer.open({
                    type:1,
                    offset: 't',
                    area: ['500px','500px'],
                    title:"添加车辆信息",
                    content:$("#addCarForm")
                });
            }else if(layEvent === 'addPet') {
                form.val("addPetForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "userId": data.id
                    ,"userName": data.name // "name": "value"
                });
                layer.open({
                    type:1,
                    offset: 't',
                    area: ['500px','500px'],
                    title:"添加宠物信息",
                    content:$("#addPetForm")
                });
            }else if(layEvent === 'addBill'){
                form.val("addBillForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "userId": data.id
                    ,"userName": data.name // "name": "value"
                });
                layer.open({
                    type:1,
                    offset: 't',
                    area: ['400px','400px'],
                    title:"添加账单信息",
                    content:$("#addBillForm")
                });
            }
        })

        /*监听table表格上面的操作按钮====结束*/

        //监听修改form的提交按钮===开始
        form.on('submit(updateUser)', function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            console.log(data);
            $.ajax({
                url:"http://localhost:8888/hy-user/updateUser",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("修改成功！");
                        //刷新table表格
                        table.reload("userTable");
                    }else if(res.code==1){
                        layer.msg(res.message);
                    }else if(res.code==2){
                        layer.msg(res.message);
                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on("submit(addBill)", function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            $.ajax({
                url:"http://localhost:8888/hy-bill/addBill",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("添加成功！");
                    }
                    if(res.code==1){
                        layer.msg(res.message);
                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on("submit(addCar)", function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            $.ajax({
                url:"http://localhost:8888/hy-car/addCar",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("添加成功！");
                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on("submit(addPet)", function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            $.ajax({
                url:"http://localhost:8888/hy-pet/addPet",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("添加成功！");
                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //监听修改的提交按钮===结束

        //文件上传的渲染===开始
        //执行实例
        upload.render({
            elem: '#uploadFile1' //绑定元素
            ,accept: "file"
            ,url: '${pageContext.request.contextPath}/hy-user/uploadImage' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#preShow1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                console.log(res)
                //上传完毕回调,需要把上传到服务器的文件名放到form表单里面。
                $("#ImageAdd").val(res.msg);
            }
        });
        upload.render({
            elem: '#uploadFile2' //绑定元素
            ,accept: "file"
            ,url: '${pageContext.request.contextPath}/hy-user/uploadImage' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#preShow2').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                console.log(res)
                //上传完毕回调,需要把上传到服务器的文件名放到form表单里面。
                $("#ImageUpdate").val(res.msg);
            }
        });

        //执行实例
        upload.render({
            elem: '#uploadFileCarAdd' //绑定元素
            ,accept: "file"
            ,url: '${pageContext.request.contextPath}/hy-car/uploadImage' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#preShowCarAdd').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                console.log(res)
                //上传完毕回调,需要把上传到服务器的文件名放到form表单里面。
                $("#CarImageAdd").val(res.msg);
            }
        });

        //执行实例
        upload.render({
            elem: '#uploadFilePetAdd' //绑定元素
            ,accept: "file"
            ,url: '${pageContext.request.contextPath}/hy-pet/uploadImage' //上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#preShowPetAdd').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                console.log(res)
                //上传完毕回调,需要把上传到服务器的文件名放到form表单里面。
                $("#PetImageAdd").val(res.msg);
            }
        });

        //文件上传的渲染===结束

        //日期时间选择器
        laydate.render({
            elem: '#addDate'
            ,type: 'datetime'
        });

        laydate.render({
            elem: '#updateDate'
            ,type: 'datetime'
        });

        laydate.render({
            elem: '#addCarDate'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#addPetDate'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#billDate'
            ,type: 'month'
        });

    })


    $('#searchBtn').on('click', function () {
        layui.use("table",function() {
            let table = layui.table;
            table.render({
                elem: '#userTable'
                ,url: 'http://localhost:8888/hy-user/showUser' //数据接口
                ,where: {
                    likename:$('#likename').val(),
                    liketelephone:$("#liketelephone").val()
                }
                ,page: true //开启分页
                ,limit:5
                ,limits:[5,8,12]
                ,cols: [[ //表头
                    {field: 'id', width:60,title: '编号' }
                    ,{field: 'username',width:80, title: '用户名'}
                    ,{field: 'password',width:90, title: '密码'}
                    ,{field: 'name',width:90, title: '姓名'}
                    ,{field: 'userPhoto', width:110,title: '照片'
                        ,templet:function(d){
                            return "<img src='"+d.userPhoto+"' height='50'/>";
                        }
                    }
                    ,{field: 'buildName',width:130, title: '楼层房间名'}
                    ,{field: 'huhao',width:60, title: '户号',
                        templet:function(d){
                            if(d.huhao==1){
                                res = "A";
                            }
                            if(d.huhao==2){
                                res = "B";
                            }
                            if(d.huhao==3){
                                res = "C";
                            }
                            return res;
                        }
                    }
                    ,{field: 'telephone',width:120, title: '手机号码'}
                    ,{field: 'state',width:80, title: '状态',
                        templet:function(d){
                            return d.state==1?"已入住":"未入住";
                        }
                    }
                    ,{field: 'checkDate', width:170,title: '入住时间'}
                    ,{title:"操作", width:230, align:'center', toolbar: '#barDemo'}
                ]]
            });
        });
    });

    $("#reset").click(function(){
        $("input[type='text']").prop("value","");
    });








</script>

<script type="text/html" id="barDemo">
    <button type="button" class="layui-btn  layui-btn-sm"><i class="layui-icon" lay-event="edit"></i></button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon" lay-event="del"></i></button>
    <button type="button" class="layui-btn  layui-btn-sm" lay-event="addBill">添加缴费</button>
    <p></p>
    <button type="button" class="layui-btn  layui-btn-sm" lay-event="addCar">添加车辆</button>
    <button type="button" class="layui-btn  layui-btn-sm" lay-event="addPet">添加宠物</button>
</script>
</body>
</html>
